<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box{
      width: 400px;
      margin: 100px auto;
    }
    .toolTip_box {
      position: relative;
    }
    .toolTip {
      position: absolute;
      max-width: 100px;
      min-width: 50px;
      min-height: 10px;
      background: #000;
      color: #fff;
      border-radius: 2px;
      padding: 2px 3px;
      font-size: 12px;
      font-style: normal;
    }
    .top:after {
      content: "";
      border: 5px solid transparent;
      border-top-color: #000;
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -5px;
    }

    .right:after {
      content: "";
      border: 5px solid transparent;
      border-right-color: #000;
      position: absolute;
      left: -10px;
      top: 50%;
      margin-top: -5px;
    }
    
    .bottom:after{
      content: "";
      border: 5px solid transparent;
      border-bottom-color: #000;
      position: absolute;
      top: -10px;
      left: 50%;
      margin-left: -5px;
    }

    .left:after {
      content: "";
      border: 5px solid transparent;
      border-left-color: #000;
      position: absolute;
      right: -10px;
      top: 50%;
      margin-top: -5px;
    }
  </style>
</head>
<body>

  <!-- <div class="box">
    <div class="toolTip_box">
      <a href="#">链接</a>
      <i class="toolTip">这是提示内容内容内容内容</i>
    </div>
  </div> -->

  <div class="box">
    这是s一个<a href="#" data-title="<em>这是内容内容内容1</em>" data-placement="top">链接</a>
    这是一个<a href="#" data-title="这是内容" data-placement="right">链接</a>
    这是一个<a href="#" data-title="这是内容内容内容内容3惹我特殊" data-placement="bottom">链接</a>
    这是一个<a href="#" data-title="这是内容内容内容内容4人生巅峰" data-placement="top">链接</a>

    <p data-title="内容">内容</p>
  </div>
  <script src="../libs/jquery-1.12.4.js"></script>
  <!-- <script src="./jquery.toolTip.js"></script> -->
  <script src="./jquery.toolTip2.js"></script>

  <script>
    $('a').toolTip2({
      // fade: 2000,
      html: true,
      // placement: 'right'
    })

    $('p').toolTip2()
  </script>
</body>
</html>